<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>造价指标</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        ; (function (designWidth, maxWidth) {
            var doc = document,
                win = window,
                docEl = doc.documentElement,
                remStyle = document.createElement("style"),
                tid;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width > maxWidth && (width = maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }

            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
            refreshRem();

            win.addEventListener("resize", function () {
                clearTimeout(tid); //防止执行两次
                tid = setTimeout(refreshRem, 300);
            }, false);

            win.addEventListener("pageshow", function (e) {
                if (e.persisted) { // 浏览器后退的时候重新计算
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);

            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function (e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(1920, 1920);
    </script>
</head>

<body>
    <div class="header">
        <div class="w1200">
            <h1 class="fl">
                <img src="./imgs/logo.png" class="logo" alt="">
                <span>水利造价信息网</span>
            </h1>
            <div class="fr login">
                <div>
                    <span>登录</span>
                    <span class="border"></span>
                    <span>注册</span>
                </div>
                <div class="search-box">
                    <input type="text" placeholder="请输入要搜索的内容">
                    <img src="./imgs/search.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- navs -->
    <div class="navs">
        <div class="w1200">
            <div class="nav">首页</div>
            <div class="nav">文件规范</div>
            <div class="nav">造价信息</div>
            <div class="nav active">造价指标</div>
            <div class="nav">水利专题</div>
            <div class="nav">资料下载</div>
            <div class="nav">联系我们</div>
            <div class="nav">在线课程</div>
        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <img src="./imgs/banner.png" alt="">
    </div>
    <!-- content -->
    <div class="content w1200">
        <div class="zj-tabs">
            <div class="zj-tab active">造价指标</div>
            <div class="zj-tab">补充定额</div>
            <div class="zj-tab">定额应用</div>
        </div>
        <!-- 造价信息内容部分 -->
        <div class="zj-content w1200">
            <div class="zj-content-left" >
                <div class="zj-content-left-top zj-content-left-list-item">
                    <img src="./imgs/list.png" alt="">
                    <span>分类列表</span>
                </div>
                <div class="zj-content-left-list-item active">
                    <span>分类1</span>
                </div>
                <div class="zj-content-left-list-item">
                    <span>分类2</span>
                </div>
                <div class="zj-content-left-list-item">
                    <span>分类3</span>
                </div>
                <div class="zj-content-left-list-item">
                    <span>分类4</span>
                </div>
            </div>
            <div class="bc-top" style="display: none;">
                <select name="" id="" class="bc-select">
                    <option selected hidden disabled value="">请选择指定的定额文件夹</option>
                </select>
                <input type="text" class="bc-input" placeholder="定额关键字，如不输入则默认所有数据">
                <button class="bc-btn">搜索</button>
            </div>
            <div class="bcde-left">

            </div>
            <div class="zj-content-right">
                <!-- 造价指标部分 -->
                <div id="zjzb">
                    <div class="img-left">
                        <img src="./imgs/pic.png" class="fl" alt="">
                        <div class="zjzb-content fr relative">
                            <h4>标题标题标题标题标题标题</h4>
                            <span>通过集成所有EP2000系统、在线填报周报月报、安全质量隐患排查治理等业务系统，得到多层级、多维度主题数据汇总分析成果。平台应用于集团各部门、各分公司以及项目建设参与各方的协同工作、信息共享。</span>
                            <p>特色：(1)基层应用系统解决数据采集难题 ；(2)提供丰富的数据分析与展示成果；(3)大量的手机应用简单易用；(4)动态数据实时共享 。</p>
                            <img src="./imgs/moree.png" class="fr" alt="">
                        </div>
                    </div>
                    <div class="img-left">
                        <div class="zjzb-content fl relative">
                            <h4>标题标题标题标题标题标题</h4>
                            <span>通过集成所有EP2000系统、在线填报周报月报、安全质量隐患排查治理等业务系统，得到多层级、多维度主题数据汇总分析成果。平台应用于集团各部门、各分公司以及项目建设参与各方的协同工作、信息共享。</span>
                            <p>特色：(1)基层应用系统解决数据采集难题 ；(2)提供丰富的数据分析与展示成果；(3)大量的手机应用简单易用；(4)动态数据实时共享 。</p>
                            <img src="./imgs/moree.png" class="fr nd" alt="">
                        </div>
                        <img src="./imgs/pic.png" class="fr" alt="">
                    </div>
                    <div class="img-left">
                        <img src="./imgs/pic.png" class="fl" alt="">
                        <div class="zjzb-content fr relative">
                            <h4>标题标题标题标题标题标题</h4>
                            <span>通过集成所有EP2000系统、在线填报周报月报、安全质量隐患排查治理等业务系统，得到多层级、多维度主题数据汇总分析成果。平台应用于集团各部门、各分公司以及项目建设参与各方的协同工作、信息共享。</span>
                            <p>特色：(1)基层应用系统解决数据采集难题 ；(2)提供丰富的数据分析与展示成果；(3)大量的手机应用简单易用；(4)动态数据实时共享 。</p>
                            <img src="./imgs/moree.png" class="fr" alt="">
                        </div>
                    </div>

                </div>
                <!-- 补充定额右侧部分 -->
                <div class="bcde">

                </div>
                <!-- 定额应用部分 -->
                <div id="deyy">
                    <div class="zj-content-right-top">
                        <div class="zj-content-right-top-left">
                            首页>定额应用
                        </div>
                        <div class="zj-content-right-top-right">
                            <input type="text" placeholder="请输入">
                            <span>搜索</span>
                        </div>
                    </div>
                    <ul class="zj-content-right-item">
                        <li>
                            <span>建设工程技术与计量（水利工程）第一章第一节</span>
                            <span>2020-09-17</span>
                        </li>
                        <li>
                            <span>建设工程技术与计量（水利工程）第一章第一节</span>
                            <span>2020-09-17</span>
                        </li>
                        <li>
                            <span>建设工程技术与计量（水利工程）第一章第一节</span>
                            <span>2020-09-17</span>
                        </li>
                        <li>
                            <span>建设工程技术与计量（水利工程）第一章第一节</span>
                            <span>2020-09-17</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer clearfix">
        <div class="relative w1200">
            <ul>
                <li>水利造价信息网</li>
                <li>电话：0371-86116911</li>
                <li>邮箱：553518846@qq.com</li>
                <li>地址：郑州市</li>
                <li>友情链接：
                    <a href="">郑州金控计算机软件有限公司</a>
                    <a href="">安徽水利造价信息网</a>
                    <a href="">百度统计</a>
                </li>
            </ul>
            <div class="qrcode">
                <img src="./imgs/qrcode.png" alt="">
                <div>扫一扫，立即关注</div>
            </div>
        </div>
        <ul>
    </div>
    <div class="copyright">
        <span>Copyright @ 2018 郑州金控计算机软件有限公司</span>
        <span>版权所有备案号：豫ICP备19032080号-5</span>
    </div>
    <script>
        $(".zj-tab").each(function(index, item) {
            if(index == 0) {
                $(this).click(function() {
                    $('#deyy').css('display', 'none')
                    $('#zjzb').css('display', 'block')
                })
            }else if(index == 1) {
                $(this).click(function() {

                })
            }else if(index == 2) {
                $(this).click(function() {
                    $('#zjzb').css('display', 'none')
                    $('#deyy').css('display', 'block')
                })
            }
        })
        let tabbtns = document.getElementsByClassName('zj-tab')
        for(var i = 0 ; i < tabbtns.length; i++) {
            tabbtns[i].onclick = function() {
                $(this).siblings().removeClass('active')
                $(this).addClass('active')
            }
        }
        let items = document.getElementsByClassName('zj-content-left-list-item')
        for(var j = 0; j < items.length; j++) {
            items[j].onclick = function() {
                $(this).siblings().removeClass('active')
                $(this).addClass('active')
            }
        }
        
    </script>
</body>

</html>